<%page expression_filter="h"/>
<%! from django.utils.translation import gettext as _ %>

<div
    id="word_cloud_${element_id}"
    class="${element_class}"
    data-ajax-url="${ajax_url}"
>
    % if display_name:
    <h3 class="hd hd-3" id="word_cloud_${element_id}_heading">${display_name}</h3>
    % endif

    % if instructions is not None:
    <div class="input_cloud_section" role="group" aria-labelledby="word_cloud_${element_id}_instructions">
    % elif display_name:
    <div class="input_cloud_section" role="group" aria-labelledby="word_cloud_${element_id}_heading">
    % else:
    <div class="input_cloud_section" role="group">
    % endif
    
        % if instructions is not None:
        <div class="input_cloud_instructions" id="word_cloud_${element_id}_instructions">
            ${instructions}
        </div>
        % endif

        % for row in range(num_inputs):
            <label>
                <span class="sr">${_('{num} of {total}').format(num=row+1, total=num_inputs)}</span>
                <input
                    class="input-cloud"
                    ${'style="display: none;"' if submitted else ''}
                    type="text"
                    size="40"
                />
            </label>
        % endfor

        <div class="action">
            <button class="save" type="button">${_('Save')}</button>
        </div>
    </div>

    <div id="result_cloud_section_${element_id}" class="result_cloud_section">
        <div class="word_cloud"></div>
        <p class="total_num_words"></p>
        <p>${_('Your words were:')}</p>
        <ul class="your_words"></ul>
    </div>

</div>
